<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import dayjs from 'dayjs'
	import useUserStore from '@/store/modules/user'
	import productApi from '@/api/zhitan/product.ts'
	import Getshop from './getshop.vue'

	const props = defineProps<{
		parseid : any
	}>()
	const dialogVisible : any = ref(false)
	const formRef : any = ref()
	const formRules : any = ref({
		name: [{
			required: true,
			message: '请输入营期名称',
			trigger: 'blur',
		}],
		num: [{
			required: true,
			message: '请输入库存数量',
			trigger: 'blur',
		}],
		date: [{
			required: true,
			message: '请添加日期',
			trigger: 'blur',
		}],
		product_name: [{
			required: true,
			message: '请选择关联产品',
			trigger: 'blur',
		}],
	})
	const form : any = ref({})
	const total : any = ref(0)
	const showGetshop : any = ref(false)
	const loadingRef : any = ref(null)
	const loading : any = ref(null)
	const tableData : any = ref([])

	const paging : any = ref({
		page: 1,
		limit: 10,
	})
	const userStore : any = useUserStore()
	const dataList : any = ref([])// 表格
	const topIndex : any = ref(1)
	const topList : any = ref([
		{
			id: 1,
			name: '余额明细',
			value: 1,
			num: 10,
		},
		{
			id: 2,
			name: '使用记录',
			value: 2,
			num: 19,
		},
		{
			id: 3,
			name: '提现记录',
			value: 3,
			num: 5,
		},
		{
			id: 4,
			name: '设置',
			value: 4,
		},
	])
	const parseId : any = ref(null)
	onMounted(() => {
		if (props.parseid) {
			parseId.value = props.parseid
		}
		getList()
	})
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		getList()
	}

	function getList() {
		paging.value.product_id = parseId.value
		productApi.ProductSchedule_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				dataList.value = res.data
				total.value = res.count
			}
		})
	}
	function remoteMethod(str : any) {
		productApi.Product_list({ page: 1, limit: 10, name: str }).then((res : any) => {
			if (res.code === 0) {
				tableData.value = res.data
			}

		})
	}
	function modify(row : any, type : any) {
		if (type === 1) {
			form.value = {
				status: 1,
				is_top: 1,
				style_type: 1,
				sort: 1
			}
		}
		else {
			form.value = JSON.parse(JSON.stringify(row))
			form.value.date = [form.value.start_time * 1000, form.value.end_time * 1000]
		}
		dialogVisible.value = true
	}

	function removeBatch(row : any) {
		productApi.ProductSchedule_edit({ id: row.id, status: row.status === 1 ? 0 : 1 }).then((res : any) => {
			if (res.code === 0) {
				getList()
				dialogVisible.value = false
				ElMessage({
					type: 'success',
					message: '操作成功',
				})
			}
		})
	}
	function submitForm() {
		console.log(form.value, 'form.value')
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				if (form.value.date) {
					form.value.start_time = form.value.date[0] / 1000
					form.value.end_time = form.value.date[1] / 1000
				}
				delete form.value.date
				delete form.value.create_time
				if (!form.value.id) {
					form.value.product_id = parseId.value
				}
				productApi.ProductSchedule_edit(form.value).then((res : any) => {
					if (res.code === 0) {
						getList()
						dialogVisible.value = false
						ElMessage({
							type: 'success',
							message: '操作成功',
						})
					}
				})
			}
		})
	}
	function changedata(e : any) {
		console.log(e, 'rrowrowrowowrrowrowrowow')
		form.value.product_name = e.name
		form.value.product_id = e.id
		showGetshop.value = false
	}
</script>

<template>
	<div class="">
		<!-- <PageHeader>
      <template #title>
        <div class="custom-style">
          <el-segmented v-model="topIndex" :options="topList" class="custom-style">
            <template #default="{ item }">
              <div class="flex flex-col items-center gap-2 p-2">
                <div>
                  <span>{{ item.name }}</span>
                  <span v-if="item.num">({{ item.num }})</span>
                </div>
              </div>
            </template>
          </el-segmented>
        </div>
      </template>
    </PageHeader> -->
		<PageMain style="position: relative;">
			<div class="d-c flex">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="营期名称:">
						<el-input v-model="paging.name" clearable placeholder="输入营期名称" @clear="paging.name = null" />
					</el-form-item>
					<!-- <el-form-item label="关联产品:">
					<el-input v-model="paging.product_name" clearable placeholder="输入产品名称"
						@clear="paging.product_name = null" />
				</el-form-item> -->
					<!-- <el-form-item label="关联产品">
						<el-select v-model="paging.product_id" filterable remote reserve-keyword placeholder="请输入产品名称"
							:remote-method="remoteMethod" :loading="loading" class="w-50">
							<el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item> -->
					<el-form-item label="状态" style="width: 200px;">
						<el-select v-model="paging.status" clearable placeholder="请选择状态" @clear="paging.status = null">
							<el-option label="正常" value="1" />
							<el-option label="暂停" value="2" />
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="起始时间:">
            <el-date-picker v-model="paging.date" type="daterange" clearable range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="x" @clear="paging.date = null" />
          </el-form-item> -->
					<el-form-item>
						<el-button type="primary" @click="getList()">
							<template #icon>
								<svg-icon name="ep:search" />
							</template>
							查询
						</el-button>
						<el-button @click="paging = {
                page: 1,
                limit: 10,
                name: null,
              }, getList()">
							重置
						</el-button>
					</el-form-item>
				</el-form>
				<div class="btnbox" v-if="userStore.permissions.includes('sessionmanargeadd')">
					<el-button type="primary" size="default" @click="modify(null, 1)">
						<template #icon>
							<svg-icon name="ep:plus" />
						</template>
						添加
					</el-button>
				</div>
			</div>
			<el-table :data="dataList" highlight-current-row border height="calc(100vh - 420px)">
				<el-table-column prop="id" label="ID" width="60" align="center" />
				<el-table-column prop="name" label="营期名称" min-width="160" align="left">
					<template #default="{ row: i }">
						<div class="aic flex">
							{{i.name}}
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="num" label="总库存" width="100" align="center" />
				<el-table-column prop="name" label="剩余库存" width="100" align="center">
					<template #default="{ row: i }">
						{{i.num - i.apply_num}}
					</template>
				</el-table-column>
				<!-- <el-table-column prop="desc" label="开始日期 - 结束日期" width="360" align="center">
				<template #default="{ row: i }">
					{{ dayjs(i.start_time * 1000).format('YYYY-MM-DD HH:mm:ss') }} 至
					{{ dayjs(i.end_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
				</template>
			</el-table-column> -->
				<!-- <el-table-column prop="product_name" label="关联产品" min-width="160" align="left">
				<template #default="{ row: i }">
					<div class="aic flex">
						{{i.product_name?i.product_name:''}}
					</div>
				</template>
			</el-table-column> -->
				<!-- <el-table-column prop="desc" label="备注" min-width="180" align="center" /> -->
				<el-table-column prop="sort" label="排序" width="100" align="center" />
				<el-table-column prop="status" label="状态" width="100" align="center">
					<template #default="{ row }">
						<div v-if="row.status === 1" class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							正常
						</div>
						<div v-else class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge downcol relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							暂停
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="220" align="center">
					<template #default="scope">
						<el-button type="primary" text @click="modify(scope.row, 2)"
							v-if="userStore.permissions.includes('sessionmanargeedit')">
							<template #icon>
								<svg-icon name="ep:edit" />
							</template>修改
						</el-button>
						<el-popconfirm :title="scope.row.status===1?'确认禁用当前营期？':'确定启用当前营期？'"
							@confirm="removeBatch(scope.row)"
							v-if="userStore.permissions.includes('sessionmanargedelete')">
							<template #reference>
								<el-button :type="scope.row.status===1?'danger':'success'" text>
									<template #icon>
										<svg-icon :name="scope.row.status===1?'ep:close':'ep:open'" />
									</template>{{scope.row.status===1?'禁用':'启用'}}
								</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<page-compon :page=" paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
				@pag-change="pagChange" />
		</PageMain>
		<HDialog v-model="dialogVisible" :title="form.id ? '编辑营期' : '新增营期'" modulewidth="450px">
			<el-form ref="formRef" :model="form" class="px-2" :rules="formRules" label-position="top"
				label-width="100px">
				<el-form-item label="营期名称：" prop="name">
					<el-input v-model="form.name" size="large" placeholder="请输入营期名称" clearable />
				</el-form-item>

				<el-row :gutter="24">
					<!-- <el-col :span="24">
						<el-form-item label="关联产品：" prop="product_name">
							<div @click="showGetshop = true" style="width:100%;">
								<el-input style="width:100%;" v-model="form.product_name" size="large"
									placeholder="请添加关联产品" clearable />
							</div>
						</el-form-item>
					</el-col> -->
					<el-col :span="24">
						<el-form-item label="库存：" prop="num">
							<el-input-number v-model="form.num" style="width: 100%;" size="large" placeholder="请输入库存数量"
								:min="0" controls-position="right" />
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
						<el-form-item label="营期日期：" prop="date">
							<el-date-picker v-model="form.date" type="datetimerange" range-separator="至" size="large"
								start-placeholder="开始日期" value-format="x" end-placeholder="结束日期" />
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="24">
						<el-form-item label="备注：" prop="desc">
							<el-input type="textarea" :rows="2" v-model="form.desc" size="large" placeholder="请输入备注"
								clearable />
						</el-form-item>
					</el-col> -->
					<el-col :span="24">
						<el-form-item label="排序：" prop="sort">
							<el-input-number v-model="form.sort" style="width: 100%;" size="large" placeholder="请输入排序号"
								:min="0" controls-position="right" />
						</el-form-item>
					</el-col>
					<!-- <el-col :span="24">
						<el-form-item label="营期状态：" prop="status">
							<el-radio-group v-model="form.status">
								<el-radio :value="1">
									正常
								</el-radio>
								<el-radio :value="0">
									暂停
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col> -->
				</el-row>
			</el-form>

			<template #footer>
				<div class="fotterbtn">
					<el-button class="cancel" @click="dialogVisible = false, form = {} ">
						取消
					</el-button>
					<el-button type="primary" @click="submitForm">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
		<Getshop v-if="showGetshop" v-model="showGetshop" @changedata="changedata($event)" />
	</div>
</template>

<style lang="scss" scoped>
	@import "@/assets/styles/tool";


	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}
</style>